<template>
    <div class="my_content">
        <topNavbar :showLeft="shouldShowLeft"
               :showOverlay="shouldLocalOverlay"
               :active="shouldLocalActive"
               :localShowTitle = "localShowTitle"
               @update:showLeft="handleShowLeftUpdate"
               @update:localOverlay="handleLocalOverlayUpdate"
               @update:localActive="handleLocalActiveUpdate"
               />
      <div class="image-layout">
        <van-card class="card" >
          <van-image
              class="card-image"
              width="100%"
              height="180"
              fit="cover"
              src="/src/assets/logo/icon.jpg"
              lazy-load
          />
          <div class="card-content">
            <div class="card-title">123</div>
            <div class="card-description">456</div>
          </div>
        </van-card>
      </div>


      <bottomNav :active="active"
    @updateActive="updateActive"
    />
    </div>
  


</template>

<script setup>
import {ref, watch} from 'vue'
import BottomNav from "@/components/navigation/bottomNav.vue";
import TopNavbar from "@/components/top/topNavbar.vue";


const active = ref(3)
const localShowTitle = ref(1)

const updateActive = (newVal) => {
    active.value=newVal
}

const shouldShowLeft = ref(false); // 控制侧边栏显示的状态
const shouldLocalOverlay = ref(false); // 控制侧边栏显示的状态
const shouldLocalActive = ref('1') // 切换内容

const handleShowLeftUpdate = (newValue) => {
    shouldShowLeft.value = newValue; // 更新父组件中的状态
};
const handleLocalOverlayUpdate = (newValue) => {
    shouldLocalOverlay.value = newValue; // 更新父组件中的状态
    shouldShowLeft.value = false
};


const handleLocalActiveUpdate = (newValue) => {
    shouldLocalActive.value = newValue
    console.log(shouldLocalActive.value)
}

</script>

<style scoped>
.my_content{
    width: 100vw;
}

.image-layout {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
}

.card {
  margin-bottom: 16px;
}

.card-image {
  border-radius: 8px 8px 0 0;
}

.card-content {
  padding: 16px;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
}

.card-description {
  font-size: 14px;
  color: #666;
}
</style>